<template>
    <div class="user-header">
        <img height="30px" style="margin-top: 15px" src="../../../assets/logo4.png">
        <!-- <el-link type="primary" @click="$router.push('/') ">首页</el-link> -->
        <el-link type="primary" @click="toGradeInquiry">成绩查询</el-link>
        <el-link type="primary">证书查询</el-link>
        <div class="user-info" v-show="isUserNameShow">
            <span style="margin-right: 20px">欢迎您:{{username}}（学员ID）</span>
            <i class="iconfont icon-tuichu"></i><span style="cursor: pointer;margin-left: 3px" @click="close">退出</span>
        </div>
        <div v-show="!isUserNameShow" class="user-info">
            <span style="line-height:60px;cursor: pointer;" @click="toLogin">登录 / </span>
            <span style="line-height:60px;cursor: pointer;" @click="toRegister">注册</span>
        </div>
<!--        <div class="user-info">-->
<!--            <el-dropdown>-->
<!--                  <span class="el-dropdown-link">-->
<!--                    {{username}}-->
<!--                      <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                  </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item icon="el-icon-user-solid" @click.native="toMymessage">报考记录</el-dropdown-item>-->
<!--                    <el-dropdown-item icon="el-icon-error" @click.native="close">退出</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        name: "headerComponent",
        props: {
    isUserNameShow: {
      type: Boolean,
      default: true,
    },},
        methods:{
            //跳转登录
            toLogin(){
                this.$router.push('/login')
            },
            toRegister(){
                this.$router.push('/registration-agreement')
            },
            //跳往成绩查询界面
            toGradeInquiry(){
                this.$router.push('/grade');
            },
            toMymessage(){
                console.log('跳转至我的信息')
                this.$router.push('/user/myMessage')
            },
            close(){
                console.log('退出');
                this.$cookies.remove('token');
                this.$store.state.token = "";
                this.$router.push('/login')
            }
        },
        created(){
            
        },
        computed:{
            username(){
                return this.$store.state.user_name
            }
        }
    }
</script>

<style>
    .user-header .el-link{
        margin-left: 20px;
        color: white;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: white;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .demonstration {
        display: block;
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>

<style scoped>
    .user-header {
        width: 1200px;
        height: 60px;
        margin: 0 auto;
        position: relative;
        background-color: #302C42;
        color: white;
        text-align: left;
        display: flex;
    }

    .user-info {
        position: absolute;
        top: 0px;
        right: 20px;
        height: 100%;
        font-size: 14px;
    }
</style>
